<template>
	<view class="b_wp">
		<view class="b_info">
			<view class="top">
				<view class="money">
					<view>当前可使用 {{currName.name}} <text v-if="type==3">数量</text><text v-else>余额</text></view>
					<view class="coin" v-if="type==1">{{info.current_effective||0}} {{currName.unit}}</view>
					<view class="coin" v-if="type==2">{{info.shop_now_credit||0}} {{currName.unit}}</view>
					<view class="coin" v-if="type==3">{{info.validNum||0}} {{currName.unit}}</view>
					<view class="coin" v-if="type==4">{{info.now_credit||0}} {{currName.unit}}</view>
				</view>
				<!-- <view class="t_more" v-if="type==1||type==2" @click="toOrder">查看订单详情 <image src="@/pages/groupbuy/static/right.png" mode="widthFix"></image></view> -->
			</view>
			<view class="tip" v-if="type==1&&info.is_show_expire==1">注意：有 {{info.about_expire}} {{currName.unit}}将在 {{info.about_expire_date}} 过期</view>
			<view class="tip" v-if="type==2">{{info.shop_credit_tip}}</view>
			<view class="tip" v-if="type==3&&info.latest_expire_num">注意：有 {{info.latest_expire_num}} {{currName.unit}}将在 {{info.latest_expire_time}} 过期</view>
			<view class="tip" v-if="type==4">{{info.tip}}</view>
		</view>
		<view class="screen">
			<view :class="{'s_it_ac':current==item.id}" @click="changeCurr(item.id)" v-for="item in currList">{{item.name}}</view>
		</view>
		<view class="commission_list">
			<!-- 米分 -->
			<block v-if="type==1">
				<view class="commission_item" v-for="(item,index) in list" :key="index">
					<view class="flex_between">
						<text class="c_tit">{{item.title}}</text>
						<text class="c_num2" v-if="!item.add_sub">{{item.money}}</text>
						<text class="c_num" v-else>{{item.money}}</text>
					</view>
					<view class="flex_between">
						<text class="c_tip">{{item.create_time}}</text>
						<text class="c_btn c_btn3" v-if="current==2">{{item.show_expire_time}}</text>
						<block v-else>
							<view class="c_btn c_btn2" v-if="item.is_expire==1">已过期</view>
							<text class="c_tip2" v-else>{{item.show_expire_time}}</text>
						</block>
					</view>
				</view>
			</block>
			<!-- 购物券 -->
			<block v-if="type==2">
				<view class="commission_item" v-for="(item,index) in list" :key="index">
					<view class="flex_between">
						<text class="c_tit">{{item.type_name}}</text>
						<text class="c_num2" v-if="item.status_txt==2">- {{item.order_price}}</text>
						<text class="c_num2" v-else-if="item.is_expired==1">- {{item.remain_money}}</text>
						<text class="c_num" v-if="item.is_expired==0&&item.status_txt==1">+ {{item.money}}</text>
					</view>
					<view class="flex_between">
						<text class="c_tip" >{{item.create_time_date}}</text>
						<view class="c_btn c_btn3" v-if="item.status_txt==2">已使用</view>
						<view class="c_btn c_btn2" v-else-if="item.is_expired==1">已过期</view>
						<text class="c_tip2" v-else>有效期至{{item.expire_time_date}}</text>
					</view>
				</view>
			</block>
			<!-- 开团卡 -->
			<block v-if="type==3">
				<view class="commission_item" v-for="(item,index) in list" :key="index">
					<view class="flex_between">
						<text class="c_tit">{{item.pintuan_card_info.name}}</text>
						<view class="c_btn" :class="{'c_btn4':item.status==1,'c_btn3':!item.status,'c_btn2':item.status==3,'c_btn5':item.status==5}">{{item.status_name}}</view>
					</view>
					<view class="c_tip">发团卡号：{{item.card_no}}</view>
					<view class="c_tip">获得时间：{{item.created_time}}</view>
					<view class="c_tip" v-if="!item.status">冷却期至：{{item.start_time}}</view>
					<view class="c_tip" v-else>过期时间：{{item.expire_time}}</view>
					<view class="c_tip" v-if="item.status==2&&item.updated_time">使用时间：{{item.updated_time}}</view>
				</view>
			</block>
			<!-- 助商额度 -->
			<block v-if="type==4">
				<view class="commission_item" v-for="(item,index) in list" :key="index">
					<view class="flex_between">
						<text class="c_tit">{{item.type_name}}</text>
						<text class="c_num" v-if="item.status_txt==1">+ {{item.money}}</text>
						<text class="c_num2" v-if="item.status_txt==2">- {{item.remain_money}}</text>
					</view>
					<view class="flex_between">
						<text class="c_tip">{{item.create_time}}</text>
						<text class="c_tip2" v-if="item.status_txt==1">有效期至{{item.expire_time}}</text>
					</view>
					<view class="flex_between">
						<text class="c_tip">助商卡号：{{item.id}}</text>
					</view>
					<view class="flex_between" v-if="item.status_txt==2&&item.to_member?item.to_member.nickname:item.to_member">
						<text class="c_tip">赠送用户：{{item.to_member.nickname}}</text>
					</view>
					<view class="flex_between" v-if="item.status_txt==1">
						<text class="c_tip">使用情况：<text class="c_tip2">{{item.money-item.remain_money}}/{{item.money}}</text></text>
						<view class="flex_align_center">
							<view class="c_btn" v-if="item.is_expired==0&&item.remain_money==item.money">未使用</view>
							<view class="c_btn c_btn2" v-if="item.is_expired==1">已过期</view>
							<view class="c_btn c_btn4" v-if="item.is_expired==0&&item.remain_money!=item.money&&item.remain_money!=0">使用中</view>
							<view class="c_btn" v-if="item.is_expired==0&&item.remain_money==item.money" @click="sendPop(item)">赠送</view>
							<view class="c_btn c_btn3" v-if="item.is_expired==1||item.remain_money!=item.money">赠送</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="empty_loading2">
			<image v-if="isloading" src="@/pages/groupbuy/static/loading.gif"></image>
			<view v-if="isempty">———— <text>没有更多了</text> ————</view>
		</view>
		<sendPop ref="sendpop" @reload="reloadList"></sendPop>
	</view>
</template>

<script>
	import sendPop from './components/send_popup.vue';
	export default {
		components: {
			sendPop
		},
		data() {
			return {
				isloading: false,
				isempty: false,
				current: 0,
				currList: [
					{id: 0, name: '全部'},
					{id: 1, name: '收入'},
					{id: 2, name: '支出'},
					{id: 3, name: '过期'},
				],
				page: 0,
				list: [],
				info: [],
				type: 0,//1米分明细 2购物券明细 3开团卡明细 4助商额度明细
				currName: {
					name: '',
					unit: ''
				},
				orderDetailsType:0
			};
		},
		onLoad(options) {
			if(options.type){
				this.type = options.type;
				if(this.type==1){
					this.currName.name = '米分';
					this.currName.unit = '米分';
					this.currList.splice(0,1);
					this.current = 1;
					this.orderDetailsType=2
				}else if(this.type==2){
					this.currName.name = '购物券';
					this.currName.unit = '券';
					this.orderDetailsType=1
					this.getInfo();
				}else if(this.type==3){
					this.currName.name = '开团卡';
					this.currName.unit = '张';
					this.currList[1].name="待使用"
					this.currList[2].name="已使用"
					this.currList[3].name="已过期"
				}else if(this.type==4){
					this.currName.name = '助商额度';
					this.currName.unit = '张';
					this.getInfo();
				}
				this.currGet();
				uni.setNavigationBarTitle({
					title: this.currName.name+'明细'
				})
			}
		},
		onReachBottom() {
			this.currGet();
		},
		methods: {
			toOrder(){
				this.$navTo(`/pages/groupbuy/orderDetails?type=${this.orderDetailsType}`);
			},
			currGet(){
				let url = '';
				let obj = {};
				let type = Number(this.type);
				switch(type){
					case 1://米分
						url = 'GoodsCardCredit/goodsCreditFlow';
						obj = {
							type: this.current
						}
						break;
					case 2://购物券
						url = 'Shop/GetShopPayLog';
						obj = {
							status: this.current
						}
						break;
					case 3://开团卡
						url = 'Group/rightsListDetail';
						obj = {
							type: this.current
						}
						break;
					case 4://助商额度
						url = 'Shop/GetCreditPayLog';
						obj = {
							status: this.current
						}
						break;
				}
				this.getList(url, obj)
			},
			getList(url,obj){
				this.page++;
				this.isloading = true;
				this.isempty = false;
				obj = {
					...obj,
					page: this.page,
					limit: 20
				}
				const idx = this.current;
				this.$axios(url,'POST','pintuan',obj).then(res=>{
					if(idx != this.current){
						return;
					}
					this.isloading = false;
					if(res.data.code == 200){
						let data;
						if(this.type==1||this.type==3){
							data = res.data.data.list;
							if(this.page == 1){
								this.info = res.data.data;
							}
						}else{
							data = res.data.data
						}
						this.list = [...this.list,...data]
						this.isempty = data.length <= 0;
					}
				})
			},
			getInfo(){
				this.$axios('Shop/HelpGoodsCredit','POST','pintuan').then(res=>{
					if(res.data.code == 200){
						this.info = res.data.data;
					}
				})
			},
			changeCurr(id){
				if(id==this.current) return;
				this.current = id;
				this.reloadList();
			},
			reloadList(){
				this.page = 0;
				this.list = [];
				this.currGet();
			},
			sendPop(e){
				this.$refs.sendpop.open(e)
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #fdf8ff;
}
.b_wp{
	padding: 20rpx 20rpx 80rpx;
	background: #fdf8ff;
}
.b_info{
	width: 100%;
	background: linear-gradient( 135deg, #B92DF1 0%, #8A17E2 100%);
	border-radius: 24rpx;
	padding: 30rpx 40rpx;
	color:#fff;
	margin: auto;
	position: relative;
	.top{
		display: flex;
		// align-items: center;
		border-bottom: 1rpx dashed #FFFFFF30;
		justify-content: space-between;
		padding-bottom: 20rpx;
		.money{
			font-size: 24rpx;
			color:#ffffffc7;
			.coin{
				font-size: 48rpx;
				font-weight: 600;
				color:#ffffff;
				word-break: break-all;
				margin-top: 6rpx;
			}
			text{
				margin-left: 8rpx;
			}
		}
		.t_more{
			font-size: 24rpx;
			color:#ffffffc7;
			height: 32rpx;
			display: flex;
			align-items: center;
			image{
				width: 14rpx;
				margin-left: 10rpx;
			}
		}
	}
	.tip{
		font-size: 24rpx;
		margin-top: 20rpx;
	}
}
.screen{
	line-height: 3;
	color: #333333;
	font-size: 26rpx;
	font-weight: 600;
	margin-top: 20rpx;
	display: flex;
	view{
		text-align: center;
		background: #FFFFFF;
		color: #9A1FE8;
		border-radius: 40rpx;
		line-height: 62rpx;
		width: 136rpx;
		margin-right: 20rpx;
	}
	.s_it_ac{
		background: #9A1FE8;
		color: #FFFFFF;
	}
}
.commission_item {
	background-color: #fff;
	padding: 20rpx;
	margin-top: 20rpx;
	border-radius: 12rpx;
	line-height: 46rpx;
	text {
		line-height: 50rpx;
	}
	.c_tit{
		color: #13001E;
		font-weight: bold;
	}
	.c_num{
		color: #9A1FE8;
		font-weight: bold;
	}
	.c_num2{
		color:#EA0000;
		font-weight: bold;
	}
	.c_tip{
		color: #5B5B5B;
		font-size: 24rpx;
	}
	.c_tip2{
		color: #9A1FE8;
		font-size: 24rpx;
	}
	.c_btn{
		background: #9A1FE8;
		color: #FFFFFF;
		border-radius: 8rpx;
		line-height: 38rpx;
		width: 120rpx;
		margin-left: 12rpx;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
	}
	.c_btn2{
		background: #EA0000;
	}
	.c_btn3{
		background: rgba(153, 153, 153, 0.1);
		color: #999999;
	}
	.c_btn4{
		background: rgba(154, 31, 232, 0.1);
		color: #9A1FE8;
	}
	.c_btn5{
		background: rgba(234, 0, 0, 0.1);
		color: #EA0000;
	}
}



</style>
